<template>
  <div>
    <div class="titler">团伙信息<span>{{ current }}</span></div>
    <div style="margin:20px 0">

      <a-button @click="followExcelXlsFun">导出</a-button>
    </div>
    <custom-table
      ref="table"
      rowKey="id"
      bordered
      :hideColSettings="['action']"
      :showAlert="false"
      :showSelection="true"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
      @selectedRow="onSelectedRow"
      @change="onTableChange"
    >
<!--      <template slot="ascriptionPlace" slot-scope="text">-->
<!--        <span> {{ ascriptionPlaceFun(text) }} </span>-->
<!--      </template>-->
      <template slot="leaveIntoIslandType" slot-scope="text, record">
        <span v-if="text === 1">出岛</span>
        <span v-if="text === 2">入岛</span>

      </template>
      <template slot="leaveIntoIslandWay" slot-scope="text, record">
        <span v-if="text === 1">飞机</span>
        <span v-if="text === 2">火车</span>
        <span v-if="text === 3">轮船</span>
        <span v-if="text === 4">公汽</span>
        <span v-if="text === 5">自驾车</span>

      </template>

      <template slot="label" slot-scope="text, record">
        <span v-if="text === 1">特别关注</span>
        <span v-if="text === 2">异常入琼</span>
        <span v-if="text === 3">信息异常</span>
        <span v-if="text === 4">首次入琼</span>

      </template>
      <template slot="intelligenceStatus" slot-scope="text, record">
        <span v-if="text === 1" style="color: red">未研判</span>
        <span v-if="text === 2">已研判</span>
      </template>
      <!--操作-->
      <template slot="action" slot-scope="text, record">
        <a-button @click="onYP(record)" type="link" style="padding: 0;">查看</a-button>
        <a-button @click="onYP(record)" type="link" style="padding: 0;">编辑</a-button>
      </template>
    </custom-table>
  </div>

</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import {followExcelXls, getInformation, getTravelTogether} from "@api/wxSmuggle/intelligence";
export default {
  name: "mingwenXQList",
  components:{
    CustomTable
  },
  data(){
    return {
      current:undefined,
      loading:false,
      pageData:{},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '姓名/代号',
          dataIndex: 'personNameCode',
          align: 'center',
          scopedSlots: { customRender: 'personNameCode' }
        },
        {
          title: '手机号',
          dataIndex: 'personPhone',
          align: 'center',
          scopedSlots: { customRender: 'personPhone' }
        },
        {
          title: '归属地',
          dataIndex: 'ascriptionPlace',
          align: 'center',
          scopedSlots: { customRender: 'ascriptionPlace' }
        },
        {
          title: '身份证号',
          dataIndex: 'identityNumber',
          align: 'center',
          scopedSlots: { customRender: 'identityNumber ' }
        },
        {
          title: '年龄',
          dataIndex: 'personAge',
          align: 'center',
          scopedSlots: { customRender: 'personAge' }
        },
        {
          title: '出入岛类型',
          dataIndex: 'leaveIntoIslandType',
          align: 'center',
          scopedSlots: { customRender: 'leaveIntoIslandType' }
        },
        {
          title: '出入岛方式',
          dataIndex: 'leaveIntoIslandWay',
          align: 'center',
          scopedSlots: { customRender: 'leaveIntoIslandWay' }
        },
        {
          title: '出入岛时间',
          dataIndex: 'leaveIntoTime',
          align: 'center',
          scopedSlots: { customRender: 'leaveIntoTime' }
        },
        {
          title: '标签',
          dataIndex: 'label',
          width: 140,
          align: 'center',
          scopedSlots: { customRender: 'label' }
        },
        {
          title: '团伙名称',
          dataIndex: 'teamName',
          width: 140,
          align: 'center'
        },
        {
          title: '情报类型',
          dataIndex: 'intelligenceStatus',
          width: 140,
          align: 'center',
          scopedSlots: { customRender: 'intelligenceStatus' }
        },
        {
          title: '发现位置',
          dataIndex: 'discoveryLocation',
          width: 140,
          align: 'center'
        },
        {
          title: '情报推送时间',
          dataIndex: 'intelligencePushTime',
          width: 140,
          align: 'center'
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      selectRows:[]
    }
  },
  watch: {
    $route: { // 监听路由的参数变化
      handler () { // 数据变化更新数据
        this.record = this.$route.query.records
        this.refreshTable()
      },
      immediate: true // 立即执行
    }
  },
  mounted() {
    this.record = this.$route.query.records
    this.refreshTable()
    console.log(this.$route.query)
    console.log(this.record)
  },
  methods:{
    followExcelXlsFun(){
      console.log(this.selectRows)
      followExcelXls({id:this.selectRows}).then(ser => {

      })
    },
    refreshTable(){
      getTravelTogether({id:this.record}).then(ser => {
        console.log(ser)
        this.current = ser.total
        this.pageData = ser.records
      })
    },
    onYP(record) {
      // this.$refs.ypModalId.show(record)
      this.$router.push({
        path:'/mingwenXQ',
        query:{
          records:record.id
        }
      })
    },
    onSelectedRow(rows,key) {
      console.log('rows')
      console.log(rows)
      this.selectRows = key
      // this.isDisabled = rows.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      // this.refreshTable()
    },
  }
}
</script>

<style scoped>
.titler{
  font-size: 20px;
  font-weight: 600;
}
</style>